<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sd" uri="/struts-dojo-tags" %>

<script type="text/javascript" src="<s:url value="/js/scorecard.js"/>"></script>
<script type="text/javascript" src="<s:url value="/js/jquery.tooltip.js"/>"></script>

<link rel="stylesheet" href="<s:url value="/styles/tooltip.css"/>" type="text/css" media="all" />
 <style type="text/css">
     select {
         max-width: 100px;
     }

 </style>


<script type="text/javascript">

    $(document).ready(function(){

        $("div.item").tooltip();

    });
</script>



<s:form id="scorecardForm" name="scorecardForm"  >
                  <s:hidden id="mensaje" value="%{mensaje}"></s:hidden>
                  <s:if test="%{mensaje != null && mensaje != ''}">
                      <script type="text/javascript">
                          openWindos($('#mensaje').val())
                      </script>
                  </s:if>
         <br/>
    <tr>
        <td style="text-align:-moz-center;text-align:-webkit-center;text-align:-ms-center;">
            <TABLE width="350px" class="tableFilter" >

                <thead>
                <th colspan="2" class="tableTitle">
                    <h4>Scorecard</h4>
                </th>
                </thead>

                <s:hidden id="altfpfvglobal" value="%{globalCommitment.plannedFpfv}"/>
                <s:textfield label="Planned FPFV (Global)" id="fpfvglobal" cssClass="datepicker" disabled="true" size="6"/>

                <s:hidden id="altlpfvglobal" value="%{globalCommitment.plannedLpfv}"/>
                <s:textfield label="Planned LPFV (Global)" id="lpfvglobal" cssClass="datepicker" disabled="true" size="6"/>

                <s:hidden id="altlpfvlocal" value="%{compromisopais.plannedLpfv}"/>
                <s:textfield label="Planned LPFV (Local)" id="lpfvlocal" cssClass="datepicker" disabled="true" size="6"/>

                <s:hidden id="altlplvlocal" value="%{compromisopais.plannedLplv}"/>
                <s:textfield label="Planned LPLV (Local)" id="lplvlocal" cssClass="datepicker" disabled="true" size="6"/>

            </TABLE>
        </td>
    </tr>
    <br/>

<tr>
    <td>
        <TABLE id="table_content" width="350px" >

            <thead>

            <TR>
                <th style="width: 90px; white-space: nowrap;">#</th>
                <th style="width: 90px; white-space: nowrap;">Predecessor</th>
                <th style="width: 120px; white-space: nowrap;">Milestone</th>
                <th style="width: 50px; white-space: nowrap;">Duration (days)</th>
                <th style="width: 90px; white-space: nowrap;">Planned Date</th>
                <th style="width: 90px; white-space: nowrap;">Corrected Plan</th>
                <th style="width: 90px; white-space: nowrap;">Actual date</th>
                <th style="width: 90px; white-space: nowrap;">Responsible</th>
                <th style="width: 50px; white-space: nowrap;"></th>

            </TR>
            </thead>
            <tbody>
            <s:iterator value="protocolscorecardList" var="protocolscorecard" status="row" >
                <tr>
                    <th style="width: 120px; white-space: nowrap;"><s:property value="%{#row.index + 1}"/> </th>
                    <th style="width: 120px; white-space: nowrap;"><s:if test="predecessor != 0"><s:property value="%{predecessor}" /></s:if> </th>
                    <th style="width: 120px; white-space: nowrap;"><s:div id="item_4" cssClass="item">
                        <s:property value="%{milestone}" />
                        <s:div cssClass="tooltip_description" style="display:none" title="Metrics">
                            <s:property value="%{metrics}" />
                        </s:div>
                    </s:div></th>
                    <th style="width: 120px; white-space: nowrap;"><s:textfield name="protocolscorecardList[%{#row.index}].duration" theme="simple" size="5" onchange="calculate()" onkeypress="return isNumberKey(event)" maxLength="3" /></th>
                    <th style="width: 120px; white-space: nowrap;">
                        <s:textfield  id="planned%{#row.index}" theme="simple" cssClass="datepicker" size="6" disabled="true"/>
                        <s:hidden name="protocolscorecardList[%{#row.index}].plannedDate" id="altplanned%{#row.index}"/>
                    </th>
                    <th style="width: 120px; white-space: nowrap;">
                        <s:textfield  id="corrected%{#row.index}" theme="simple" cssClass="datepicker" size="6" disabled="true"/>
                        <s:hidden name="protocolscorecardList[%{#row.index}].correctedDate" id="altcorrected%{#row.index}"/>
                    </th>
                    <th style="width: 120px; white-space: nowrap;">
                        <s:textfield  id="actual%{#row.index}" theme="simple" cssClass="datepicker" size="6" onchange="calculate()"/>
                        <s:hidden name="protocolscorecardList[%{#row.index}].actualDate" id="altactual%{#row.index}"/>
                    </th>
                    <th style="width: 120px; white-space: nowrap;">
                        <s:select
                                name="protocolscorecardList[%{#row.index}].responsible"
                                headerKey=""
                                headerValue="Choose One"
                                list="roleList"
                                listValue="descripcion"
                                listKey="descripcion"
                                value="%{responsible}"
                                theme="simple">
                        </s:select></th>
                    <th>
                        <s:a href="#" onclick="openWindows('%{#row.index}', $('#comments_%{#row.index}').val())" theme="simple" ><img src="<s:url value="/images/search.png"/>" alt="search"></s:a>
                    </th>
                    <th style="display: none;" ><s:hidden id="id_%{#row.index}" value="%{id}" name="protocolscorecardList[%{#row.index}].id" ></s:hidden></th>
                    <th style="display: none;" ><s:hidden id="comments_%{#row.index}" value="%{comments}" name="protocolscorecardList[%{#row.index}].comments" ></s:hidden></th>
                    <th style="display: none;" ><s:hidden value="%{predecessor}" name="protocolscorecardList[%{#row.index}].predecessor" ></s:hidden></th>
                    <th style="display: none;" ><s:hidden value="%{milestone}" name="protocolscorecardList[%{#row.index}].milestone" ></s:hidden></th>
                    <th style="display: none;" ><s:hidden value="%{scorecardOrder}" name="protocolscorecardList[%{#row.index}].scorecardOrder" ></s:hidden></th>
                    <th style="display: none;" ><s:hidden value="%{metrics}" name="protocolscorecardList[%{#row.index}].metrics" ></s:hidden></th>
                    <th style="display: none;" ><s:hidden value="%{scorecardConfigurationid.id}" name="protocolscorecardList[%{#row.index}].scorecardConfigurationid.id" ></s:hidden></th>

                </tr>
            </s:iterator>

            <tr>
                <td colspan="8" style="text-align: center" >
                    <s:submit value="Save" id="save" action="save" theme="simple" onclick="deshabilitarFechas()" />

                </td>

            </tr>
            </tbody>
        </TABLE>

    </td>
</tr>







</s:form>

<script type="text/javascript">
    selectItemMenu("scorecard");
</script>
